import {Button, Card, Col, Form, Input, type InputRef, Popconfirm, Row, Space, Table, Tag} from 'antd'
import react, {useEffect, useRef, useState} from 'react'
import React from "react";
import {DeleteOutlined} from "@ant-design/icons";
import {useAppDispatch} from "@/hooks";
import {addOrUpdateAttrListAsync, deleteAttrValAsync, getAttrInfoListAsync, useSelectAttr} from "@/store/slice/attr";

function Edit(props:any){
    const {toggleShow,addList} = props
    const [form] = Form.useForm()
    const dispatch = useAppDispatch()
    const [newAddList,setNewAddList] = useState<any>({})
    const inputRef = useRef<InputRef>(null);
    const {category3Id} = useSelectAttr()
    const [isDisabled,setIsDisabled] = useState<boolean>(false)
    useEffect(()=>{
        if(!addList.attrName){
            setIsDisabled(true)
        }
        const copy = JSON.parse(JSON.stringify(addList))
        copy.attrValueList.forEach((item: any) => item.isChecked = false)
        setNewAddList((pre:any)=>{
            return copy
        })
        form.setFieldsValue(copy)
        return ()=>{
            form.resetFields()
        }
    },[])

    return(
        <>
            <Card>
                <Form
                    form={form}
                >
                    <Row>
                        <Col span={5}>
                            <Form.Item label="属性名" name='attrName'>
                                <Input onChange={(e:any)=>{
                                           if(!e.target.value)return setIsDisabled(true)
                                            setIsDisabled(false)
                                           setNewAddList({...newAddList,attrName:e.target.value})
                                       }}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <Space>
                    <Button type="primary" disabled={isDisabled} onClick={()=>{
                        setNewAddList({...newAddList,attrValueList:[...newAddList.attrValueList,{id:Math.random()+3,valueName:'',isChecked:true}]})
                    }}>添加属性值</Button>
                    <Button onClick={()=>{
                        toggleShow(false)
                    }}>取消</Button>
                </Space>
                <Table
                    rowKey='id'
                    columns={[
                        {
                            title:"序号",
                            width:80,
                            align:"center",// 居中
                            dataIndex:"id",
                        },
                        {
                            title:"属性值名称",
                            render(value,record,n){
                                return(
                                    <>
                                        {
                                            value.isChecked? <Row>
                                                <Col span={4}>
                                                    <Input ref={inputRef}
                                                           size={"small"} defaultValue={value.valueName} onChange={(e:any)=>{
                                                        setNewAddList({...newAddList,
                                                            attrValueList:newAddList.attrValueList.map((item:any,index:any)=>{
                                                                if(n===index){
                                                                    item.valueName = e.target.value
                                                                }
                                                                return item
                                                            })})
                                                        }
                                                    }
                                                           onBlur={()=>{
                                                               const temp = [...newAddList.attrValueList.map((item:any,index:any)=>{
                                                                   if(n===index){
                                                                       item.isChecked = false
                                                                   }
                                                                   return item
                                                               }).filter((item:any)=>item.valueName.trim())]
                                                               setNewAddList({...newAddList,
                                                                   attrValueList:temp})
                                                           }
                                                           }
                                                    />
                                                </Col>
                                            </Row>:<Tag color="rgb(245,108,108)" onClick={()=>{
                                                setNewAddList((pre:any)=>{
                                                    return {...newAddList,
                                                        attrValueList:newAddList.attrValueList.map((item:any,index:any)=>{
                                                            if(n===index){
                                                                item.isChecked = true
                                                            }
                                                            return item
                                                        })}
                                                })
                                               setTimeout(()=>{
                                                   inputRef.current!.focus({
                                                       cursor: 'end',
                                                   })
                                               })
                                            }
                                            }>{value.valueName}</Tag>
                                        }
                                    </>
                                )
                            }
                        },
                        {
                            title:"操作",
                            align:"center",// 居中
                            render(value){
                                return(
                                    <>
                                        <Popconfirm
                                            title="确认删除该属性吗?"
                                            onConfirm={()=>{
                                                dispatch(deleteAttrValAsync(value.id))
                                            }}
                                            okText="确定"
                                            cancelText="取消"
                                        >
                                            <Button
                                                type="primary"
                                                icon={<DeleteOutlined />}
                                                shape="circle"
                                                danger
                                            />
                                        </Popconfirm>
                                    </>
                                )
                            }
                        }
                    ]}
                    dataSource={newAddList.attrValueList}
                    pagination={false}
                    style={{margin:'20px 0'}}/>
                <Space>
                    <Button type="primary" disabled={isDisabled} onClick={async ()=>{
                        //整理数据
                        setNewAddList((pre:any)=>{
                            return {
                                ...newAddList,
                                attrValueList:newAddList.attrValueList.map((item:any)=>{
                                    delete item.isChecked
                                    return item
                                })
                            }
                        })
                        await dispatch(addOrUpdateAttrListAsync(newAddList))
                        await dispatch(getAttrInfoListAsync(category3Id))
                        toggleShow(false)
                    }}>保存</Button>
                    <Button disabled={isDisabled} onClick={()=>{
                        toggleShow(false)
                    }}>取消</Button>
                </Space>
            </Card>
        </>
    )
}

export default Edit
